<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css" />
    <link rel="stylesheet" href="/css/course/courseManage/courseList/course-list.css">
    <script src="/js/public/public.js"></script>
    <style>
        .layui-form-item label{
            width:70px;
        }
    </style>
</head>
<body>
<div class="layui-row">
    <div class="list">
        <div class="list-left layui-col-md8">
            <div class="list-left-left"></div>
            <p class="list-left-right" id="title">部门列表</p>
        </div>
        <div class="list-right layui-col-md4">
            <div class="functionButton">
                <button class="list-right-left layui-btn" style="margin-top: 3px" onclick="refresh()">
                    <i class="layui-icon layui-icon-refresh"></i>&nbsp;刷新
                </button>
                <button class="list-right-right layui-btn" id="goBack" style="margin-top: 3px">
                    <i class="layui-icon layui-icon-left"></i>&nbsp;返回
                </button>
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <div class="layui-row query">
            <div class="layui-card headerCenter">
                <div class="layui-card-header backColor">
                    <i class="layui-icon">&#xe615;</i>
                    筛选查询
                </div>
                <div class="layui-card-body">
                    <form class="layui-form">
                        <div class="layui-form-item ">
                            <label class="layui-form-label">部门名称:</label>
                            <div class="layui-input-inline">
                                <input type="text" name="deptName" class="layui-input" placeholder="请输入部门名称">
                            </div>
                            <label class="layui-form-label" style="width: 75px">管理员名称:</label>
                            <div class="layui-input-inline">
                                <input type="text" name="trueName" class="layui-input" placeholder="请输入管理员名称">
                            </div>
                            <label class="layui-form-label">创建日期:</label>
                            <div class="layui-input-inline">
                                <input type="text" name="createDate" class="layui-input"  placeholder="请选择创建日期">
                            </div>
                            <label class="layui-form-label">状态:</label>
                            <div class="layui-input-inline">
                                <select class="layui-select" name="status" id="status">
                                    <option value=""></option>
                                    <option value="1">启用</option>
                                    <option value="2">禁用</option>
                                </select>
                            </div>
                            <div class="queryButtonBox">
                                <button type="button" class="layui-btn" onclick="search()">
                                    <i class="layui-icon layui-icon-search"></i>&nbsp;搜索
                                </button>
                                <button type="reset" class="layui-btn layui-btn-warm">
                                    <i class="layui-icon layui-icon-refresh"></i>&nbsp;重置
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md12">
        <!--数据列表-->
        <div class="record" style="padding: 0 10px 0 10px;height: 100%">
            <div class="dataTable">
                <table id="demoTable" lay-filter="demoTable"></table>
            </div>
        </div>
        <!--表头样式-->
        <div id="tableHeader" style="display: none;">
            <i class="layui-icon layui-icon-align-left"></i>部门数据管理列表
            <button type="button" style="float: right" class="layui-btn import" onclick="addDept()">
                <i class="layui-icon">&#xe608;</i>&nbsp;添加部门
            </button>
        </div>
        <!--表内操作-->
        <div id="button_caozuo" style="display:none" >
            <a alt="编辑" title="编辑"  lay-event="updateTable" style="color:green;">编辑</a>
            <a alt="删除" title="删除"  lay-event="deleteTable" style="color:green;">删除</a>
        </div>
    </div>
</div>
<script>
    layui.use(['jquery','layer','table','form','laydate'],function(){
        var $=layui.jquery;
        var layer=layui.layer;
        var table=layui.table;
        var form=layui.form;
        var laydate=layui.laydate;

        laydate.render({
            elem: '#createDate',
            type: 'datetime',
            trigger: 'click'
        })

        refresh=function refresh(){
            location.reload();
        }

        getTable('','','');

        search=function search(){
            var deptName=$("input[name=deptName]").val();
            var trueName=$("input[name=trueName]").val();
            var createDate=$("input[name=createDate]").val();
            var status;
            if($("#status option:selected").text()=="启用"){
                status=$("#status option:selected").val();
            }else if($("#status option:selected").text()=="禁用"){
                status=$("#status option:selected").val();
            }
            getTable(deptName,trueName,createDate,status);
        }

        function getTable(deptName,trueName,createDate,status){
            var param={
                'deptName':deptName,
                'trueName':trueName,
                'createDate':createDate,
                'status':status
            }
            $.ajax({
                url:"/login/getJsDeptList",
                type:"post",
                dataType:"json",
                data:param,
                success:function (data) {
                    demoTable(data.data);
                }
            })
        }

        function demoTable(data) {
            table.render({
                elem: '#demoTable',
                title: "部门列表",
                data: data,
                toolbar: '#tableHeader',
                limit: 10,
                page: {
                    layout: ['count', 'prev', 'page', 'next', 'limit', 'skip', 'refresh'],
                    limits: [10, 20, 30],
                    first: "首页",
                    last: "尾页",
                },
                cols:[[
                    {type:'checkbox'},
                    {title: '序号',align:'center', templet: function (data) {
                            return data.LAY_INDEX;
                        }},
                    {field:"deptName",title:"部门名称",align:"center"},
                    {field:"deptDescirbe",title:"部门描述",align:"center"},
                    {field:"trueName",title:"创建人",align:"center"},
                    {field:"createDate",title:"创建时间",align:"center"},
                    {field:"status",title:"状态",align:"center",templet:function (data) {
                            if(data.status==1){
                                return '<input type=\"checkbox\" value="'+data.id+'" lay-skin=\"switch\" lay-text=\"启用|禁用"\ checked lay-filter="switchTest">';
                            }else if(data.status==2){
                                return '<input type=\"checkbox\" value="'+data.id+'" lay-skin=\"switch\" lay-text=\"启用|禁用"\ lay-filter="switchTest"\>';
                            }
                        }},
                    {field:"",title:"操作",align:"center",toolbar:"#button_caozuo"}
                ]]
            })
        }

        form.on('switch(switchTest)', function(data){
            if(data.elem.checked==true){
                $.ajax({
                    url:"/login/updateJsDeptStatus",
                    type:"post",
                    dataType:"json",
                    data:{'status':1,'id':data.value},
                    success:function (data) {
                        getTable('','','');
                        layer.msg("修改成功！！！");
                    }
                })
            }else{
                $.ajax({
                    url:"/login/updateJsDeptStatus",
                    type:"post",
                    dataType:"json",
                    data:{'status':2,'id':data.value},
                    success:function (data) {
                        getTable('','','');
                        layer.msg("修改成功！！！");
                    }
                })
            }
        })
        addDept = function addDept(){
            layer.open({
                type:2,
                title:"添加部门",
                area:["700px","350px"],
                offset: 'auto',
                content:"add-dept.html",
                end: function () {
                    getTable();
                }
            })
        }
        table.on('tool(demoTable)',function (obj) {
            var event = obj.event;
            if (event == "updateTable") {
                layer.open({
                    type:2,
                    title:"修改",
                    area:["700px","350px"],
                    offset: 'auto',
                    btn:["确定","取消"],
                    content:"update-dept.html",
                    success:function(layero,index){
                        var child = layero.find('iframe').contents();
                        child.find("input[name=deptName]").val(obj.data.deptName);
                        child.find("input[name=trueName]").val(obj.data.trueName);
                        child.find("input[name=createDate]").val(obj.data.createDate);
                        child.find("input[name=deptIden]").val(obj.data.deptIden);
                        child.find("#deptDescirbe").text(obj.data.deptDescirbe);
                    },
                    yes:function(index,layero){
                        var child = layero.find('iframe').contents();
                        var param={
                            'deptName':child.find("input[name=deptName]").val(),
                            'deptIden':child.find("input[name=deptIden]").val(),
                            'deptDescirbe':child.find("#deptDescirbe").val(),
                            'id':obj.data.id
                        }
                        $.ajax({
                            url:"/login/updateJsDept",
                            data:param,
                            type:'post',
                            dataType:'json',
                            success:function (data) {
                                layer.close(index);
                                getTable('','','','');
                                layer.msg("修改成功！！！")
                            }
                        })
                    }
                })
            }else if(event == "deleteTable") {
                layer.confirm('确认要删除吗?', {icon: 3, title:'提示'}, function(index){
                    $.ajax({
                        url:"/login/deleteJsDeptById",
                        data:{'id':obj.data.id},
                        type:"post",
                        dataType:"json",
                        success:function (data) {
                            layer.msg("删除成功");
                            getTable('','','');
                        }
                    })
                    layer.close(index);
                })
            }
        })

        addCoupon=function addCoupon(){
            parent.addTab(52);
        }


    })

</script>
</body>
</html>